<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>spot-list</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
                <cite>导航元素</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <!-- 右侧内容框架，更改从这里开始 -->
                        <form class="layui-form xbs">
                            <div class="layui-form-pane" style="text-align: center;">
                                <div class="layui-form-item" style="display: inline-block;">
                                    <label class="layui-form-label xbs768">查询条件</label>
                                    <div class="layui-input-inline xbs768">
                                        <input class="layui-input" placeholder="景点名称" id="title" name="title">
                                    </div>
                                    <div class="layui-input-inline xbs768">
                                        <input class="layui-input" placeholder="景点地址" id="addr" name="addr">
                                    </div>

                                    <div class="layui-input-inline xbs768">
                                        <input type="number" class="layui-input" placeholder="景点最高价格" id="price"
                                            name="price">
                                    </div>

                                    <div class="layui-input-inline xbs768">
                                        <select name="status">
                                            <option value="">景点状态</option>
                                            <option value="1">正常</option>
                                            <option value="2">停用</option>
                                            <option value="3">删除</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width:80px">
                                        <button type="submit" lay-submit lay-filter="search" class="layui-btn"><i
                                                class="layui-icon">&#xe615;</i></button>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="delAll()">
                            <i class="layui-icon"></i>批量删除</button>
                        <button class="layui-btn" onclick="xadmin.open('添加景点','./spot-add.html',800,600)">
                            <i class="layui-icon"></i>添加</button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="" lay-skin="primary">
                                    </th>
                                    <th>ID</th>
                                    <th>景点名</th>
                                    <th>景点地址</th>
                                    <th>门票</th>
                                    <th>开放时间</th>
                                    <th>文化背景</th>
                                    <th>历史背景</th>
                                    <th>景点描述</th>
                                    <th>景点状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="spotListDiv">
                                <!-- <tr>
                                    <td>
                                        <input type="checkbox" name="" lay-skin="primary">
                                    </td>
                                    <td>1</td>
                                    <td>福州三坊七巷</td>
                                    <td>福建省福州市鼓楼区道山路附近</td>
                                    <td>0</td>
                                    <td>08:30-20:30</td>
                                    <td>由三个坊、七条巷和一条中轴街肆组成，因此自古就被称为“三坊七巷”</td>
                                    <td>曾先后走出过如严复、陈宝琛、林觉民和林长民等中国近代史上众多名人。</td>
                                    <td>三坊七巷是国家5A级旅游景区，是福州老城区经历了建国后的拆迁建设后留存下来的历史街区之一。是福州的历史之源、文化之根、文脉昌盛之地。</td>
                                    <td>1</td>
                                    <td class="td-manage">
                                        <a title="查看" onclick="xadmin.open('编辑','order-view.html')" href="javascript:;">
                                            <i class="layui-icon">&#xe63c;</i></a>
                                        <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" name="" lay-skin="primary">
                                    </td>
                                    <td>2017009171822298053</td>
                                    <td>老王:18925139194</td>
                                    <td>7829.10</td>
                                    <td>7854.10</td>
                                    <td>待确认</td>
                                    <td>未支付</td>
                                    <td>未发货</td>
                                    <td>其他方式</td>
                                    <td>申通物流</td>
                                    <td>2017-08-17 18:22</td>
                                    <td class="td-manage">
                                        <a title="查看" onclick="xadmin.open('编辑','order-view.html')" href="javascript:;">
                                            <i class="layui-icon">&#xe63c;</i></a>
                                        <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" name="" lay-skin="primary">
                                    </td>
                                    <td>2017009171822298053</td>
                                    <td>老王:18925139194</td>
                                    <td>7829.10</td>
                                    <td>7854.10</td>
                                    <td>待确认</td>
                                    <td>未支付</td>
                                    <td>未发货</td>
                                    <td>其他方式</td>
                                    <td>申通物流</td>
                                    <td>2017-08-17 18:22</td>
                                    <td class="td-manage">
                                        <a title="查看" onclick="xadmin.open('编辑','order-view.html')" href="javascript:;">
                                            <i class="layui-icon">&#xe63c;</i></a>
                                        <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i></a>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div class="page">
                            <div id="pageList">
                                <!-- <a class="prev" href="">&lt;&lt;</a>
                                <a class="current">1</a>
                                <a class="num">2</span>
                                    <a class="num" href="">3</a>
                                    <a class="next" href="">&gt;&gt;</a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    $(document).ready(function () {
        console.log("indexSpotList.html载入时！");
        spotList(1, 3);
    });

    //向服务器端发送ajax请求
    function spotList(page, size) {
        $.ajax({
            type: "get",
            dataType: "json",
            data: { "status": 1 },
            url: "http://localhost:9876/scenic/spot/getSpotList/" + page + "/" + size,
            success: function (data) {
                console.log('???')
                outSpot(data);
            },
            error: function (data) {
                console.log(data)
            }
        });


    }

    //输出景点列表
    function outSpot(data) {

        var sb = "";

        console.log(data);
        console.log(data.data.data[0].id);
        for (var i = 0; i < data.data.data.length; i++) {
            sb += '    <tr>';
            sb += '                                    <td>';
            sb += '                                        <input type=\"checkbox\" name="' + data.data.data[i].id + '" lay-skin=\"primary\">';
            sb += '                                    </td>';
            sb += '                                    <td>' + data.data.data[i].id + '</td>';
            sb += '                                    <td>' + data.data.data[i].title + '</td>';
            sb += '                                    <td>' + data.data.data[i].addr + '</td>';
            sb += '                                    <td>' + data.data.data[i].price + '</td>';
            sb += '                                    <td>' + data.data.data[i].openTime + '</td>';
            sb += '                                    <td>' + data.data.data[i].culture + '</td>';
            sb += '                                    <td>' + data.data.data[i].history + '</td>';
            sb += '                                    <td>' + data.data.data[i].descript + '</td>';
            sb += '                                    <td>' + data.data.data[i].status + '</td>';
            sb += '                                    <td class="td-manage">';
            sb += '                                        <a title="查看" onclick="xadmin.open(\'编辑\',\'spot-edit.html?id='+data.data.data[i].id+'\')" href="javascript:;">';
            sb += '                                            <i class="layui-icon">&#xe63c;</i></a>';
            sb += '                                        <a title="删除" onclick="spot_del(this,' + data.data.data[i].id + ')" href="javascript:;">';
            sb += '                                            <i class="layui-icon">&#xe640;</i></a>';
            sb += '                                    </td>';
            sb += '                                </tr>';
        }
        $("#spotListDiv").html(sb);
        console.log(sb);
        layui.use('element', function () {
            var element = layui.element;
            element.init();
        });


        //分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'pageList', //注意，这里的 test1 是 ID，不用加 # 号
                count: data.data.total, //数据总数，从服务端得到
                limit: 3,//限制一页数据
                // prev: "<a class=\"prev\" href=\"javascript:spotList(" + (data.data.page - 1) + ",3)\">上一页</a>",
                // next: "<a class=\"next\" href=\"javascript:spotList(" + (data.data.page + 1) + ",3)\">下一页</a>",
                curr: data.data.page,
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if (!first) {
                        //do something
                        spotList(obj.curr, obj.limit);
                    }
                }
            });
        });


        layui.use('form', function () {

            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

            form.render();

        });
    }


    //监听条件
    layui.use('form', function () {
        var form = layui.form;
        // layer.msg('玩命卖萌中', function(){
        //   //关闭后的操作
        //   });
        //监听提交
        form.on('submit(search)', function (data) {
            // alert(888)
            console.log(data.field);
            $.ajax({
                type: "get",
                dataType: "json",
                data: data.field,
                url: "http://localhost:9876/scenic/spot/getSpotList/1/3",
                success: function (data) {
                    console.log('???')
                    if (data.data.total == 0) {
                        layer.msg("没有查询到结果！");
                    } else {
                        layer.msg("已查询到结果！");
                        outSpot(data);
                    }
                },
                error: function (data) {
                    console.log(data)
                }
            });
            return false;
        });
    });
    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });



    /*用户-删除*/
    function spot_del(obj, id) {
        layer.confirm('确认要删除吗？',
            function (index) {
                //发异步删除数据
                $.ajax({
                    type: "delete",
                    dataType: "json",
                    url: "http://localhost:9876/scenic/spot/deleteScenicSpot/" + id,
                    success: function (data) {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', {
                            icon: 1,
                            time: 1000
                        });
                    },
                    error: function (data) {
                        console.log(data)
                    }
                });


            });
    }

    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data,
            function (index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {
                    icon: 1
                });
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
    }
    
    </script>

</html>